<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.staticfile.org/vue/2.6.11/vue.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/iview/3.5.4/styles/iview.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/iview/3.5.4/iview.min.js"></script>
    <link href="{{ url_for('static',filename='css/cms.css') }}" rel="stylesheet">
    <link href="{{ url_for('static',filename='css/user_control.css') }}" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script>
    <title>后台管理</title>
</head>
<body>
<div id="app">
    <header class="header">
        <h2>老年人心理健康评估：后台管理</h2>
        <div>
            <h2>Admin</h2>
            <i-button @click="logout">退出</i-button>
        </div>
    </header>
    <div class="main">
        <aside class="sidebar">
            <ul>
                <li><a href="/cms">首&nbsp;&nbsp;页</a></li>
                <li class="active"><a href="/user_control">用户管理</a></li>
                <li><a href="/question_bank">题库管理</a></li>
            </ul>
        </aside>
        <main class="content">
            <i-table border :columns="col" :data="data">
                <template slot-scope="{ row }" slot="name">
                    <strong>[[ row.name ]]</strong>
                </template>
                <template slot-scope="{ row, index }" slot="action">
                    <i-button type="primary" size="small" style="margin-right: 5px" @click="show(index)">View</i-button>
                    <i-button type="error" size="small" @click="remove(index)">Delete</i-button>
                </template>
            </i-table>
        </main>
        <div class="result_box" v-show="user_form.show">
            <div class="user_edit">
                <h2>ID: [[ user_form.id ]]</h2>
                <i-form :model="user_form" :label-width="50">
                    <form-item label="用户名">
                        <i-input type="text" v-model="user_form.name" placeholder="用户名" size="large"></i-input>
                    </form-item>
                    <form-item label="邮箱">
                        <i-input type="text" v-model="user_form.email" placeholder="邮箱" size="large"></i-input>
                    </form-item>
                    <form-item label="密码">
                        <i-input type="text" v-model="user_form.pwd" placeholder="密码" size="large"></i-input>
                    </form-item>
                    <form-item label="性别">
                        <radio-group v-model="user_form.sex">
                            <radio label="男"></radio>
                            <radio label="女"></radio>
                        </radio-group>
                    </form-item>
                    <form-item label="年龄">
                        <input-number :max="120" :min="1" v-model="user_form.age"/>
                    </form-item>
                </i-form>
                <div class="btns">
                    <i-button @click="user_form.show = false">取消</i-button>
                    <i-button type="primary" @click="sbumit_user_form">修改</i-button>
                </div>
            </div>
        </div>
        <div class="result_box" v-show="result.show">
            <div class="result">
                <h2>
                    ID: [[ result.user.id ]]&nbsp;&nbsp;&nbsp;用户名：[[ result.user.name ]]
                    <i-select style="margin-left: 20px;width: 200px" v-model="result.index" @on-change="result_change">
                        <i-option v-for="(item,index) in result.user.data" :value="index" :key="index">[[ item.title ]]
                        </i-option>
                    </i-select>
                    <i-button class="close" shape="circle" icon="md-close" @click="result.show = false"></i-button>
                </h2>
                <div>
                    <tag :color="result.table.lv">[[ result.table.tips ]]</tag>
                    <i-table border :columns="[{title: '项目',key: 'title'}, {title: '结果',key: 'value'}]"
                             :data="result.table.result"></i-table>
                    <div class="chart" id="chart"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script>
    var vm = new Vue({
        delimiters: ['[[', ']]'],
        el: '#app',
        data: {
            col: [
                {
                    title: '用户名',
                    key: 'name'
                },
                {
                    title: '邮箱',
                    key: 'email'
                },
                {
                    title: '年龄',
                    key: 'age',
                    width: 75
                }, {
                    title: '性别',
                    key: 'sex',
                    width: 110,
                    render: (h, params) => {
                        return h('div', [
                            h('tag', {}, params.row.sex)
                        ]);
                    }
                },
                {
                    title: '上次登陆',
                    key: 'last_login'
                },
                {
                    title: '心理健康评估',
                    key: 'data',
                    width: 300,
                    render: (h, params) => {
                        let item = []
                        for (i = 0, l = params.row.data.length; i < l; i++) {
                            let d = params.row.data[i]
                            if (d.lv === 'warning' || d.lv == 'error') {
                                item.push(
                                    h('tag', {
                                        props: {
                                            color: d.state ? d.lv : 'info',
                                        },
                                    }, d.state ? d.tips : '未测试')
                                )
                            }
                        }
                        if (item.length === 0) {
                            item.push(
                                h('tag', {
                                    props: {
                                        color: 'success',
                                    },
                                }, '一切正常')
                            )
                        }
                        return h('div', item)
                    }
                },
                {
                    title: '操作',
                    key: 'action',
                    fixed: 'right',
                    width: 190,
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'text',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        vm.show_result(params.row)
                                    }
                                }
                            }, '查看数据'),
                            h('Button', {
                                props: {
                                    type: 'text',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        vm.show_user(params.row)
                                    }
                                }
                            }, '编辑'),
                            h('Button', {
                                props: {
                                    type: 'text',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        vm.del_user(params.row)
                                    }
                                }
                            }, '删除')
                        ]);
                    }
                }
            ],
            data:{{ users|safe }},
            user_form: {
                show: false,
                id: 0,
                name: '',
                pwd: '',
                email: '',
                sex: '',
                age: 0
            },
            result: {
                index: 0,
                show: false,
                user: {},
                table: {},
                option: {},
            }
        },
        mounted: function () {
            this.myChart = echarts.init(document.getElementById('chart'))
        },
        methods: {
            {#删除用户#}
            del_user(user) {
                swal({
                    title: '删除用户',
                    text: '确认删除： “' + user.name + '”',
                    dangerMode: true,
                    buttons: ['取消', '删除']
                }).then(state => {
                    if (state) {
                        let params = new FormData()
                        params.append('action', 'del')
                        params.append('uid', user.id)
                        axios.post('', params).then(res => {
                            if (res.data.state) {
                                this.$Message['success']({
                                    background: true,
                                    content: '删除成功！'
                                });
                                vm.data = res.data.users
                                console.log(res.data.users)
                            } else {
                                this.$Message['error']({
                                    background: true,
                                    content: '删除失败！'
                                });
                            }
                        })
                    } else {
                        this.$Message['info']({
                            background: true,
                            content: '取消删除'
                        });
                    }
                })
            },
            {#显示用户信息#}
            show_user(user) {
                this.user_form = {
                    show: true,
                    id: user.id,
                    pwd: user.pwd,
                    name: user.name,
                    email: user.email,
                    sex: user.sex === '未设置' ? '' : user.sex,
                    age: user.age
                }
            },
            {#修改用户信息#}
            sbumit_user_form() {
                if (this.user_form.name && this.user_form.pwd && this.user_form.email) {
                    if (/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/.test(this.user_form.email)) {
                        let params = new FormData()
                        params.append('action', 'alter')
                        params.append('data', JSON.stringify(this.user_form))
                        axios.post('', params).then(res => {
                            if (res.data.state) {
                                this.$Message['success']({
                                    background: true,
                                    content: '修改成功！'
                                });
                                vm.data = res.data.users
                                console.log(res.data.users)
                                this.user_form.show = false
                            } else {
                                this.$Message['error']({
                                    background: true,
                                    content: '修改失败！'
                                });
                            }
                        })
                    } else {
                        this.$Message['error']({
                            background: true,
                            content: '邮箱错误！'
                        });
                    }
                } else {
                    this.$Message['error']({
                        background: true,
                        content: '内容不能为空！'
                    });
                }
            },
            {#显示用户测试结果#}
            show_result(user) {
                this.result.show = true
                this.result.user = user
                this.result.index = 0
                this.result.table = user.data[0]
                this.create_opton(this.result.table.result)
            },
            {#切换问卷#}
            result_change(index) {
                this.result.index = index
                this.result.table = this.result.user.data[index]
                this.create_opton(this.result.table.result)
            },
            {#创建图表配置项#}
            create_opton(data) {
                this.result.option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        left: 'center'
                    },
                    series: [{
                        top: 20,
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: []
                    }]
                }

                for (i = 0, l = data.length - 1; i < l; i++) {
                    this.result.option.series[0].data.push({
                        value: data[i].value,
                        name: data[i].title
                    })
                }
                this.myChart.setOption(this.result.option, true);
            },
            {#退出登录#}
            logout() {
                Cookies.remove('secret_key');
                window.location.href = '/admin'
            }
        }
    });
</script>
</html>
